<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Dictionary</title>
    <link rel="stylesheet" href="css/dictionary.css">
</head>
<body>
    <div id="container">
        <div id="header">
            <h2>The Devil's Dictionary</h2>
            <div class="author">by Ambrose Bierce</div>
        </div>
        <div class="letters">
            <div class="letter" id="letter-a">
                <h3>
                    <a href="ajax/a.html">A</a>
                </h3>
            </div>
            <div class="letter" id="letter-b">
                <h3>
                    <a href="ajax/b.json">B</a>
                </h3>
            </div>
            <div class="letter" id="letter-c">
                <h3>
                    <a href="ajax/c.js">C</a>
                </h3>
            </div>
            <div class="letter" id="letter-d">
                <h3>
                    <a href="ajax/d.xml">D</a>
                </h3>
            </div>
            <div class="letter" id="letter-e">
                <h3>E</h3>
                <ul>
                    <li>
                        <a href="http://localshot:3000/?term=Eavesdrop">Eavesdrop</a>
                    </li>
                    <li>
                        <a href="http://localshot:3000/?term=Edible">Edible</a>
                    </li>
                    <li>
                        <a href="http://localshot:3000/?term=Education">Education</a>
                    </li>
                    <li>
                        <a href="http://localshot:3000/?term=Eloquence">Eloquence</a>
                    </li>
                    <li>
                        <a href="http://localshot:3000/?term=Elysiumn">Elysiumn</a>
                    </li>
                    <li>
                        <a href="http://localshot:3000/?term=Emancipation">Emancipation</a>
                    </li>
                    <li>
                        <a href="http://localshot:3000/?term=Emotion">Emotion</a>
                    </li>
                    <li>
                        <a href="http://localshot:3000/?term=Envelope">Envelope</a>
                    </li>
                    <li>
                        <a href="http://localshot:3000/?term=Envy">Envy</a>
                    </li>
                    <li>
                        <a href="http://localshot:3000/?term=Epitaph">Epitaph</a>
                    </li>
                    <li>
                        <a href="http://localshot:3000/?term=Evangelist">Evangelist</a>
                    </li>
                </ul>
            </div>
            <div class="letter" id="letter-f">
                <h3>F</h3>
                <form action="http://localhost:5500/">
                    <label for="term">Term:</label>
                    <input type="text" name="term" value="" id="term">
                    <label for="search">Search:</label>
                    <input type="submit" name="search" value="search" id="search">
                </form>
            </div>
            <div class="letter" id="letter-g">
                <h3>
                    <a href="ajax/g.php">G</a>
                </h3>
            </div>
            <div class="letter" id="letter-h">
                <h3>
                    <a href="ajax/h.html">H</a>
                </h3>
            </div>
            <div class="letter" id="exercise-1">
                <h3>
                    <a href="ajax/exercises-content.html" data-exercises>Exercise 1: body content</a>
                </h3>
            </div>
            <div class="letter" id="exercise-2">
                <h3>
                    <a href="ajax/exercises-content.html" data-exercises>Exercise 2: tootip</a>
                </h3>
            </div>
            <div class="letter" id="exercise-3">
                <h3>
                    <a href="ajax/does-not-exist.html" data-exercises>Exercise 3: Does not exits</a>
                </h3>
            </div>
            <div class="letter" id="exercise-4">
                <h3>
                    <a href="https://api.github.com/users/jquery/repos" data-exercises>Exercise 4: jsonp</a>
                </h3>
            </div>
        </div>
        <div id="dictionary">
            <div id="loading">Loading...</div>
        </div>
    </div>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="js/dictionary.js"></script>
    <script src="js/exercise-1.js"></script>
    <script src="js/exercise-2.js"></script>
    <script src="js/exercise-3.js"></script>
    <script src="js/exercise-4.js"></script>
</body>
</html>